<template>
        <div>
        <div class="box">
            <van-swipe  ref="vswipe" class="my-swipe" @change="onChange" :show-indicators=false vertical>
                <van-swipe-item v-for="video in videos" :key="video.id">
                    <video :src="video.url" controls></video>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div> 
</template>

<script>
import {getVideos} from '@/request'
import Vue from 'vue';
import { List } from 'vant';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(List);

export default {
    data () {
        return {
            loading:false,
            finished:false,
            videos:[],
            current:0
        }
    },
    created() {
        this.request();
    },
    updated() {
        this.updateing()
    },
    methods:{
        // async request() {
        //     var videos = await getVideos()
        //     videos = videos.slice((this.page - 1) * 5, this.page * 5)
        //     if(videos.length < 5) {
        //         this.finished = true
        //     } else {
        //         this.page++
        //     }
        //         this.loading = false
        //         this.videos = this.videos.concat(videos)
        // },
        // onLoad() {
        //     this.request()
        // },
        async request() {
            this.videos = await getVideos();
        },
        onChange(index) {
           this.current = index
           this.updateing()
            var vs = document.querySelectorAll("video");
            // console.log(vs);
            vs.forEach((v) => v.pause());
            vs[index].play();
        },
        updateing() {
            var vs = document.querySelectorAll('video')
                // 获取到当前正在轮播的video
                var video = vs[this.current]
                // 绑定事件 - 当开始播放的时候，提高音量
                video.onplay = () => {
                    // video.muted = false
                    // if(video.currentTime >= 5) {
                    // video.muted = false
                    // }
                    video.volume = 1
                }
                // 绑定事件 - 当播放完成后，切换到下一个轮播
                video.onended = () => {
                    // 切换
                    this.$refs.vswipe.next()
                }
        }
    }
}
</script>

<style scoped>
.box {
    padding: 0 10px 0 10px;
}
video {
    height: 100vh;
    width: 100%;
}
.my-swipe .van-swipe-item {
    width: 100%;
    height: 100vh;
}
.van-swipe {
    background-color: rgb(0, 0, 0);
    width: 100%;
   
}
</style>